<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闯关结算 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 基础样式 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #0a0a2a 0%, #1a1a4a 50%, #0a0a2a 100%);
      color: white;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    /* ===== 背景动画 ===== */
    .stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .star {
      position: absolute;
      background-color: white;
      border-radius: 50%;
      animation: twinkle 5s infinite;
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

    /* ===== 主容器 ===== */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* ===== 结果动画容器 ===== */
    .result-animation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.8);
      z-index: 100;
      opacity: 1;
      pointer-events: all;
    }

    .result-title {
      font-size: 80px;
      font-weight: bold;
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 4px;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
      transform: scale(1);
    }

    .victory {
      color: #ffd700;
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    }

    .defeat {
      color: #c41e3a;
      text-shadow: 0 0 20px rgba(196, 30, 58, 0.7);
    }

    .continue-btn {
      padding: 15px 40px;
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      border: none;
      border-radius: 50px;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 30px;
      opacity: 1;
      transform: translateY(0);
      box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
    }

    .continue-btn:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 123, 255, 0.6);
    }

    /* ===== 结算页面 ===== */
    .result-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 40px 20px;
      text-align: center;
      position: relative;
      z-index: 1;
      display: none;
    }

    /* ===== 段位徽章 ===== */
    .rank-badge {
      width: 200px;
      height: 200px;
      margin: 0 auto 40px;
      position: relative;
    }

    .rank-icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      position: relative;
      z-index: 2;
    }

    .rank-glow {
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,215,0,0.5) 0%, rgba(255,215,0,0) 70%);
      z-index: 1;
      animation: glowPulse 2s infinite alternate;
    }

    @keyframes glowPulse {
      from { transform: scale(1); opacity: 0.7; }
      to { transform: scale(1.1); opacity: 1; }
    }

    /* ===== 数据统计 ===== */
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: transform 0.3s;
    }

    .stat-card:hover {
      transform: translateY(-5px);
    }

    .stat-value {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .stat-label {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* ===== 进度条 ===== */
    .progress-container {
      margin: 30px 0;
    }

    .progress-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .progress-bar {
      height: 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #ff8c00);
      border-radius: 10px;
      width: 65%;
    }

    /* ===== 奖励和称号 ===== */
    .rewards-container {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin: 40px 0;
      flex-wrap: wrap;
    }

    .reward-item {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 20px;
      width: 200px;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .reward-icon {
      font-size: 40px;
      margin-bottom: 15px;
      color: #ffd700;
    }

    .reward-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .reward-desc {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* ===== 错题列表 ===== */
    .wrong-questions {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 30px;
      margin: 40px 0;
      text-align: left;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .section-title {
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
      color: #ffd700;
    }

    .question-item {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      border-left: 4px solid #ff6b6b;
    }

    .question-text {
      margin-bottom: 10px;
      font-size: 16px;
    }

    .question-answer {
      color: #ff6b6b;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .add-to-wrongset {
      background: rgba(255, 107, 107, 0.2);
      color: white;
      border: 1px solid #ff6b6b;
      border-radius: 4px;
      padding: 5px 10px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .add-to-wrongset:hover {
      background: #ff6b6b;
    }

    .add-to-wrongset.added {
      background: #28a745;
      border-color: #28a745;
    }

    /* ===== 按钮区域 ===== */
    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 40px;
    }

    .btn {
      padding: 15px 30px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }

    .btn:hover::before {
      left: 100%;
    }

    .btn-primary {
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-success {
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-outline {
      background: transparent;
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

    .btn-outline:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* ===== 段位颜色 ===== */
    .bronze { background: linear-gradient(135deg, #cd7f32, #8b4513); }
    .silver { background: linear-gradient(135deg, #c0c0c0, #a9a9a9); }
    .gold { background: linear-gradient(135deg, #ffd700, #daa520); }
    .platinum { background: linear-gradient(135deg, #e5e4e2, #b8b8b8); }
    .diamond { background: linear-gradient(135deg, #b9f2ff, #7fffd4); }
    .master { background: linear-gradient(135deg, #8a2be2, #4b0082); }

    /* ===== 粒子效果 ===== */
    .particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: gold;
      opacity: 0;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .result-title {
        font-size: 48px;
      }

      .rank-badge {
        width: 150px;
        height: 150px;
      }

      .rank-icon {
        font-size: 60px;
      }

      .stats-container {
        grid-template-columns: 1fr 1fr;
      }

      .action-buttons {
        flex-direction: column;
        align-items: center;
      }

      .rewards-container {
        flex-direction: column;
        align-items: center;
      }
    }

    @media (max-width: 480px) {
      .result-title {
        font-size: 36px;
      }

      .stats-container {
        grid-template-columns: 1fr;
      }

      .stat-value {
        font-size: 28px;
      }
    }
  </style>
</head>
<body>
<!-- 动态星空背景 -->
<div class="stars" id="stars"></div>

<!-- 粒子效果 -->
<div class="particles" id="particles"></div>

<!-- 结果动画 -->
<div class="result-animation" id="resultAnimation">
  <h1 class="result-title victory" id="resultTitle">闯关成功</h1>
  <button class="continue-btn" id="continueBtn">继续学习</button>
</div>

<!-- 结算页面 -->
<div class="container">
  <div class="result-container" id="resultContainer">
    <!-- 段位徽章 -->
    <div class="rank-badge">
      <div class="rank-icon gold">
        <i class="fas fa-crown"></i>
      </div>
      <div class="rank-glow"></div>
    </div>

    <!-- 进度条 -->
    <div class="progress-container">
      <div class="progress-label">
        <span>当前经验</span>
        <span>650 / 1000</span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill"></div>
      </div>
    </div>

    <!-- 数据统计 -->
    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-value">85</div>
        <div class="stat-label">得分</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">4/5</div>
        <div class="stat-label">正确题目</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">12:34</div>
        <div class="stat-label">用时</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">黄金I</div>
        <div class="stat-label">段位</div>
      </div>
    </div>

    <!-- 奖励和称号 -->
    <div class="rewards-container">
      <div class="reward-item">
        <div class="reward-icon">
          <i class="fas fa-medal"></i>
        </div>
        <div class="reward-title">知识达人</div>
        <div class="reward-desc">连续5次闯关成功</div>
      </div>
      <div class="reward-item">
        <div class="reward-icon">
          <i class="fas fa-bolt"></i>
        </div>
        <div class="reward-title">速度之星</div>
        <div class="reward-desc">完成时间低于平均30%</div>
      </div>
      <div class="reward-item">
        <div class="reward-icon">
          <i class="fas fa-gem"></i>
        </div>
        <div class="reward-title">精准专家</div>
        <div class="reward-desc">正确率达到90%以上</div>
      </div>
    </div>

    <!-- 错题列表 -->
    <div class="wrong-questions">
      <h2 class="section-title">错题列表</h2>
      <div class="question-item">
        <div class="question-text">1. Spring框架中，控制反转(IoC)的主要作用是什么？</div>
        <div class="question-answer">你的答案: 依赖查找 | 正确答案: 依赖注入</div>
        <button class="add-to-wrongset">加入错题集</button>
      </div>
      <div class="question-item">
        <div class="question-text">3. 什么是Spring AOP的核心概念？</div>
        <div class="question-answer">你的答案: 面向对象编程 | 正确答案: 面向切面编程</div>
        <button class="add-to-wrongset">加入错题集</button>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div class="action-buttons">
      <button class="btn btn-primary">
        <i class="fas fa-redo"></i> 重新挑战
      </button>
      <button class="btn btn-success">
        <i class="fas fa-arrow-right"></i> 下一个知识点
      </button>
      <button class="btn btn-outline">
        <i class="fas fa-book"></i> 查看错题集
      </button>
    </div>
  </div>
</div>

<!-- 音效元素 - 使用本地文件 -->
<audio id="victorySound" preload="auto">
  <!-- 替换为您的本地音效文件路径 -->
  <source src="sounds/victory.mp3" type="audio/mpeg">
</audio>
<audio id="clickSound" preload="auto">
  <!-- 替换为您的本地音效文件路径 -->
  <source src="sounds/click.mp3" type="audio/mpeg">
</audio>
<audio id="hoverSound" preload="auto">
  <!-- 替换为您的本地音效文件路径 -->
  <source src="sounds/hover.mp3" type="audio/mpeg">
</audio>

<script>
  // 用户数据
  const userData = {
    score: 85,
    correctAnswers: 4,
    totalQuestions: 5,
    timeUsed: 754, // 秒
    rank: "黄金I",
    currentExp: 650,
    nextLevelExp: 1000,
    level: 5,
    passed: true // 是否通过
  };

  // 错题数据
  const wrongQuestions = [
    {
      id: 1,
      text: "Spring框架中，控制反转(IoC)的主要作用是什么？",
      userAnswer: "依赖查找",
      correctAnswer: "依赖注入"
    },
    {
      id: 3,
      text: "什么是Spring AOP的核心概念？",
      userAnswer: "面向对象编程",
      correctAnswer: "面向切面编程"
    }
  ];

  // DOM元素
  const resultAnimation = document.getElementById('resultAnimation');
  const resultTitle = document.getElementById('resultTitle');
  const continueBtn = document.getElementById('continueBtn');
  const resultContainer = document.getElementById('resultContainer');
  const addToWrongsetButtons = document.querySelectorAll('.add-to-wrongset');

  // 创建星空背景
  function createStars() {
    const starsContainer = document.getElementById('stars');
    const starsCount = 150;

    for (let i = 0; i < starsCount; i++) {
      const star = document.createElement('div');
      star.className = 'star';

      // 随机位置和大小
      const size = Math.random() * 3;
      star.style.width = `${size}px`;
      star.style.height = `${size}px`;
      star.style.left = `${Math.random() * 100}%`;
      star.style.top = `${Math.random() * 100}%`;

      // 随机动画延迟
      star.style.animationDelay = `${Math.random() * 5}s`;

      starsContainer.appendChild(star);
    }
  }

  // 创建粒子效果 - 修复了CSS自定义属性问题
  function createParticles(count, x, y) {
    const particlesContainer = document.getElementById('particles');

    for (let i = 0; i < count; i++) {
      const particle = document.createElement('div');
      particle.className = 'particle';

      // 随机位置
      particle.style.left = `${x}px`;
      particle.style.top = `${y}px`;

      // 随机大小
      const size = Math.random() * 4 + 2;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;

      // 随机颜色
      const colors = ['#ffd700', '#ff8c00', '#ff4500', '#ff6347'];
      particle.style.background = colors[Math.floor(Math.random() * colors.length)];

      // 随机角度和距离
      const angle = Math.random() * Math.PI * 2;
      const distance = Math.random() * 100 + 50;
      const duration = Math.random() * 1 + 0.5;

      // 计算最终位置 - 直接计算而不是使用CSS变量
      const endX = x + Math.cos(angle) * distance;
      const endY = y + Math.sin(angle) * distance;

      // 使用transform动画而不是CSS变量
      particle.style.transition = `all ${duration}s ease-out`;
      particle.style.opacity = '1';

      // 延迟执行动画
      setTimeout(() => {
        particle.style.transform = `translate(${endX - x}px, ${endY - y}px)`;
        particle.style.opacity = '0';
      }, 10);

      particlesContainer.appendChild(particle);

      // 移除粒子
      setTimeout(() => {
        if (particle.parentNode) {
          particle.parentNode.removeChild(particle);
        }
      }, duration * 1000);
    }
  }

  // 播放音效 - 使用本地文件
  function playSound(soundId, volume = 0.5) {
    try {
      const sound = document.getElementById(soundId);
      if (sound) {
        sound.volume = volume;
        sound.currentTime = 0;
        sound.play().catch(e => {
          console.log("音频播放失败:", e);
          // 如果播放失败，使用备用音效
          playFallbackSound(soundId);
        });
      } else {
        playFallbackSound(soundId);
      }
    } catch (e) {
      console.log("音频播放失败:", e);
      playFallbackSound(soundId);
    }
  }

  // 备用音效 - 如果本地文件无法播放
  function playFallbackSound(type) {
    try {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();

      if (type === 'victorySound') {
        // 胜利音效 - 高音调
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();

        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
        oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
        oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2); // G5

        gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);

        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 0.5);
      } else if (type === 'clickSound' || type === 'hoverSound') {
        // 按钮音效 - 短促
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();

        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
        oscillator.frequency.setValueAtTime(600, audioContext.currentTime + 0.05);

        gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);

        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 0.1);
      }
    } catch (e) {
      console.log("备用音效播放失败:", e);
    }
  }

  // 显示结果动画
  function showResultAnimation() {
    // 根据结果设置标题和音效
    if (userData.passed) {
      resultTitle.textContent = '闯关成功';
      resultTitle.className = 'result-title victory';
      playSound('victorySound', 0.7);

      // 创建粒子效果
      createParticles(30, window.innerWidth / 2, window.innerHeight / 2);
    } else {
      resultTitle.textContent = '闯关失败';
      resultTitle.className = 'result-title defeat';
      playSound('victorySound', 0.7); // 失败时也使用胜利音效，您可以根据需要修改
    }
  }

  // 初始化页面
  function initPage() {
    createStars();

    // 显示结果动画
    showResultAnimation();

    // 继续学习按钮事件
    continueBtn.addEventListener('click', function() {
      playSound('clickSound', 0.5);

      // 隐藏动画，显示结算页面
      resultAnimation.style.display = 'none';
      resultContainer.style.display = 'block';
    });

    // 按钮悬停效果
    const buttons = document.querySelectorAll('button, .btn');
    buttons.forEach(button => {
      button.addEventListener('mouseenter', function() {
        playSound('hoverSound', 0.3);
      });
    });

    // 错题集按钮事件
    addToWrongsetButtons.forEach(button => {
      button.addEventListener('click', function() {
        playSound('clickSound', 0.5);

        // 切换按钮状态
        if (this.classList.contains('added')) {
          this.classList.remove('added');
          this.textContent = '加入错题集';
        } else {
          this.classList.add('added');
          this.textContent = '已加入错题集';

          // 模拟添加到错题集
          setTimeout(() => {
            alert('题目已成功添加到错题集！您可以在错题集中查看并进行间隔重复复习。');
          }, 300);
        }
      });
    });

    // 其他按钮事件
    document.querySelector('.btn-primary').addEventListener('click', function() {
      playSound('clickSound', 0.5);
      alert('重新挑战功能将在后续版本中实现');
    });

    document.querySelector('.btn-success').addEventListener('click', function() {
      playSound('clickSound', 0.5);
      alert('进入下一个知识点');
    });

    document.querySelector('.btn-outline').addEventListener('click', function() {
      playSound('clickSound', 0.5);
      alert('查看错题集功能将在后续版本中实现');
    });
  }

  // 当页面加载完成后初始化
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initPage);
  } else {
    initPage();
  }
</script>
</body>
</html>